<template>
  <view class="poster-box" :style="{ zIndex: posterUri ? 9999 : -1 }">
    <image
      v-if="posterUri"
      :src="posterUri"
      :style="{
        height: `${height * pixelRatio}px`,
      }"
    />
    <canvas
      v-if="!posterUri"
      class="poster2"
      canvas-id="poster2"
      :style="{
        width: `${375 * pixelRatio}px`,
        height: `${height * pixelRatio}px`,
        opacity: 0,
      }"
    />
  </view>
</template>

<script setup>
import { ref, defineProps, defineExpose } from "vue";
import { getDownloadFileUri, message, ossImg, oss2 } from "@/utils/utils";

const props = defineProps({
  info: {
    type: Object,
    default: () => ({
      intro: [],
      pictures: [],
      productSkus: [],
    }),
  },

  height: {
    type: Number,
    default: 589,
  },
});
const posterUri = ref("");
// const { pixelRatio } = uni.getDeviceInfo()
const pixelRatio = 1;
const user = ref(getApp().globalData.user);

const createPoster = async (goods, poster, isGood = true) => {
  uni.showLoading({ title: "正在生成海报" });

  if (isGood) {
    const { nickname, icon } = user.value || {};
    const canvas = uni.createCanvasContext("poster2", poster.value);
    canvas.setFillStyle("#F7F7F7");
    canvas.fillRect(0, 0, 375 * pixelRatio, 589 * pixelRatio);
    // 绘制头像
    canvas.save();
    canvas.beginPath();
    canvas.arc(
      35 * pixelRatio,
      49 * pixelRatio,
      22 * pixelRatio,
      0,
      Math.PI * 2,
      false
    );
    canvas.clip();
    const avatar = await getDownloadFileUri(icon);
    canvas.drawImage(
      avatar,
      13 * pixelRatio,
      27 * pixelRatio,
      44 * pixelRatio,
      44 * pixelRatio
    );
    canvas.restore();
    // 绘制标题
    canvas.setFillStyle("#0D0D0D");
    canvas.font = `400 ${18 * pixelRatio}px Source Han Sans SC`;
    canvas.fillText(`|  ${nickname}`, 73 * pixelRatio, 63 * pixelRatio);
    // 绘制标题
    canvas.setFillStyle("#424242");
    canvas.font = `400 ${14 * pixelRatio}px Source Han Sans SC`;
    canvas.fillText(goods.name, 19 * pixelRatio, 100 * pixelRatio);
    // 绘制主图
    const posterImage = await getDownloadFileUri(goods.imageUrl);
    canvas.drawImage(
      posterImage,
      18 * pixelRatio,
      119 * pixelRatio,
      340 * pixelRatio,
      340 * pixelRatio
    );
    // 绘制小程序码
    console.log(12131, ossImg("oreo/qrcode.png"));
    const qrcode = await getDownloadFileUri(ossImg("oreo/qrcode.png"));
    canvas.drawImage(
      qrcode,
      18 * pixelRatio,
      483 * pixelRatio,
      68 * pixelRatio,
      68 * pixelRatio
    );

    canvas.setFillStyle("#404040");
    // 绘制二维码标题
    canvas.font = `400 ${16 * pixelRatio}px Source Han Sans SC`;
    canvas.fillText(goods.name, 94 * pixelRatio, (497 + 15) * pixelRatio);
    // 绘制二维码提示
    canvas.font = `400 ${14 * pixelRatio}px Source Han Sans SC`;
    canvas.fillText(
      "长按图片识别二维码即可购买",
      94 * pixelRatio,
      (525 + 13) * pixelRatio
    );

    canvas.draw(false, (result) => {
      uni.canvasToTempFilePath(
        {
          canvasId: "poster2",
          fileType: "png",
          success: (result) => {
            console.log(result);
            uni.hideLoading();
            if (result.tempFilePath) {
              posterUri.value = result.tempFilePath;
              uni.saveImageToPhotosAlbum({
                filePath: posterUri.value,
                success: (result) => {
                  setTimeout(() => {
                    message("保存海报成功～");
                    posterUri.value = "";
                  }, 1500);
                },
                fail: () => {
                  posterUri.value = "";
                },
              });
            }
          },
        },
        poster.value
      );
    });
  } else {
    const canvas = uni.createCanvasContext("poster2", poster.value);
    canvas.fillRect(0, 0, 375 * pixelRatio, 811.5 * pixelRatio);
    canvas.save();
    canvas.beginPath();

    // 绘制背景图
    const bgImg = await getDownloadFileUri(
      oss2("activity/poster_share_bg.png")
    );
    canvas.drawImage(bgImg, 0, 0, 375 * pixelRatio, 811.5 * pixelRatio);

    // 绘制小程序码
    const qrcode = await getDownloadFileUri(
      oss2("activity/poster_share_qrcode.png")
    );
    canvas.drawImage(qrcode, 26, 686.5, 80 * pixelRatio, 80 * pixelRatio);

    // 绘制提示
    const textImg = await getDownloadFileUri(
      oss2("activity/poster_share_qr_text.png")
    );
    canvas.drawImage(textImg, 118, 686.5, 247.5 * pixelRatio, 80 * pixelRatio);

    canvas.draw(false, (result) => {
      uni.canvasToTempFilePath(
        {
          canvasId: "poster2",
          fileType: "png",
          success: (result) => {
            console.log(result);
            uni.hideLoading();
            if (result.tempFilePath) {
              posterUri.value = result.tempFilePath;
              uni.saveImageToPhotosAlbum({
                filePath: posterUri.value,
                success: (result) => {
                  setTimeout(() => {
                    message("保存海报成功～");
                    posterUri.value = "";
                  }, 1500);
                },
                fail: () => {
                  posterUri.value = "";
                },
              });
            }
          },
        },
        poster.value
      );
    });
  }
};

defineExpose({
  createPoster,
});
</script>

<style lang="less" scoped>
.poster-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  image {
    width: 375px;
    position: absolute;
    animation: posterShow 1.6s forwards cubic-bezier(0.15, 0.05, 0.2, 1);
    transform: scale(0.85);
    will-change: auto;
    opacity: 0.85;
  }
}
@keyframes posterShow {
  0% {
    transform: translate(0, 0) scale(0.85);
    opacity: 0.85;
  }
  40% {
    transform: translate(0, 0) scale(0.4);
    opacity: 1;
  }
  100% {
    transform: scale(0.4) translate(-100%, 240%);
    opacity: 1;
  }
}
</style>
